<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--引入Axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- import Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>

<body>
    <div id="app">

        <el-container>
            <el-header style="height: 100px; background-color:  rgb(7, 149, 192);">
                <div style="height: 100px;width: 100%;">
                    <div style="display: flex; justify-content: center; margin: 10px auto;">
                        <h1>欢迎使用学生管理系统</h1>
                    </div>
                    <div style="float: right; margin-top: -35px;">
                        <el-button type="danger" round @click="exit">退出登录</el-button>
                    </div>
                    <div style="float: right; margin-top: -35px;">
                        <el-button round @click="changePassword">修改密码</el-button>
                    </div>
                </div>
            </el-header>
            <el-container style="height: 100vh;">
                <el-aside width="200px" style="height: 100%; background-color: rgb(7, 149, 192);">

                    <div>
                        <el-menu :default-active="2-1" class="el-menu-demo" @select="handleSelect"
                            style="background-color: rgb(7, 149, 192);">
                            <el-menu-item index="1">后台首页</el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">系统用户</template>
                                <el-menu-item index="2-1">管理员</el-menu-item>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">模块管理</template>
                                <el-menu-item index="3-1">社团信息</el-menu-item>
                                <el-menu-item index="3-2">课程信息</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </div>

                </el-aside>
                <el-main>

                    <div>

                        <div>

                            <el-form label-width="80px">
                                <el-form-item label="用户名" style="float: left;">
                                    <el-input v-model="username"></el-input>
                                </el-form-item>
                                <el-button type="primary" @click="SelectClick(v.username),dialogFormVisible2 = true">查询</el-button>

                                <el-dialog title="查询" :visible.sync="dialogFormVisible2" append-to-body >
                                    <el-form :model="form2">
                                        <el-form-item label="用户名" :label-width="formLabelWidth">
                                            <el-input v-model="form2.username" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="用户组" :label-width="formLabelWidth">
                                            <el-input v-model="form2.nick" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="邮箱" :label-width="formLabelWidth">
                                            <el-input v-model="form2.email" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="手机号" :label-width="formLabelWidth">
                                            <el-input v-model="form2.phone" autocomplete="off"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                        <el-button type="primary"
                                                   @click="dialogFormVisible2 = false">确
                                            定</el-button>
                                    </div>
                                </el-dialog>


                            </el-form>

                        </div>

                        <div>

                            <el-table :data="tableData" border style="width: 100%">
                                <el-table-column fixed prop="username" label="用户名" width="150">
                                </el-table-column>
                                <el-table-column prop="nick" label="用户组" width="120">
                                </el-table-column>
                                <el-table-column prop="email" label="邮箱" width="120">
                                </el-table-column>
                                <el-table-column prop="phone" label="手机号" width="120">
                                </el-table-column>
                                <el-table-column label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="selectform(scope.row),dialogFormVisible = true"
                                            type="primary" size="small">编辑</el-button>

                                        <!--嵌套表单-->
                                        <el-dialog title="编辑" :visible.sync="dialogFormVisible" append-to-body >
                                            <el-form :model="form">
                                                <el-form-item label="用户名" :label-width="formLabelWidth">
                                                    <el-input v-model="form.username" autocomplete="off"></el-input>
                                                </el-form-item>
                                                <el-form-item label="用户组" :label-width="formLabelWidth">
                                                    <el-select v-model="form.nick" placeholder="请选择">
                                                        <el-option
                                                                v-for="item in options"
                                                                :key="item.value"
                                                                :label="item.label"
                                                                :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="邮箱" :label-width="formLabelWidth">
                                                    <el-input v-model="form.email" autocomplete="off"></el-input>
                                                </el-form-item>
                                                <el-form-item label="手机号" :label-width="formLabelWidth">
                                                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                                                </el-form-item>
                                            </el-form>
                                            <div slot="footer" class="dialog-footer">
                                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                                <el-button type="primary"
                                                    @click="handleEdit(scope.row),dialogFormVisible = false">确
                                                    定</el-button>
                                            </div>
                                        </el-dialog>

                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="open(scope.$index,scope.row)" type="danger" size="small">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </div>

                    </div>

                </el-main>
            </el-container>
        </el-container>

    </div>
</body>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                username: "",
                tableData: [],
                options:[{
                    value: '1',
                    label: '老师'
                }, {
                    value: '2',
                    label: '管理员'
                }],
                dialogFormVisible: false,
                dialogFormVisible2: false,
                form: {
                    id: "",
                    username: "",
                    nick: "",
                    email: "",
                    phone: ""
                },
                form2: {
                    id: "",
                    username: "",
                    nick: "",
                    email: "",
                    phone: ""
                },
                formLabelWidth: '120px'

            }
        },
        methods: {
            //退出登录按钮
            exit(){
                window.location.href = '/login.html';
            },
            //修改密码按钮
            changePassword(){
                window.location.href = '/changePassword.html';
            },
            //编辑弹出框数据查询
            selectform(row) {
                axios.post("/selectform",row).then(function (response){
                    v.form.id = response.data.id;
                    v.form.username = response.data.username;
                    v.form.nick = response.data.nick;
                    v.form.email = response.data.email;
                    v.form.phone = response.data.phone;
                })
            },
            //导航菜单选中
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                switch (key) {
                    case '1':
                        window.location.href = '#';
                        break;
                    case '2-1':
                        window.location.href = '#';
                        break;
                    case '3-1':
                        window.location.href = '#';
                        break;
                    case '3-2':
                        window.location.href = '#';
                        break;
                    default:
                        console.log('Unknown index');
                }
            },
            //查询按钮
            SelectClick(username) {
                axios.post("/getUserByName", { username : username}).then(function (response) {
                    v.form2.id = response.data.id;
                    v.form2.username = response.data.username;
                    v.form2.nick = response.data.nick;
                    v.form2.email = response.data.email;
                    v.form2.phone = response.data.phone;
                })
            },

            //编辑按钮
            handleEdit(row) {

                axios.post("/updataUser",v.form).then(function (response) {
                    //更新表格
                    axios.get("/getAllUser").then(function (response) {
                        v.tableData = response.data;
                    })
                })
            },

            //删除按钮
            handleDelete(index, row) {
                axios.post("/deleteUser", row).then(function (response) {
                    v.tableData.splice(index, 1);
                })
            },
            //删除确认·
            open(index, row) {
                this.$alert('确认删除该用户吗?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    showCancelButton: true // 确保显示取消按钮
                }).then(() => {
                    // 用户点击了“确定”按钮
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    v.handleDelete(index, row); // 执行删除操作
                }).catch(() => {
                    // 用户点击了“取消”按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        },
        //自动发送请求
        created: function () {
            //发送请求获取user信息
            axios.get("/getAllUser").then(function (response) {
                v.tableData = response.data;
            })
        },

    })
</script>

</html>